<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <el-form
        ref="queryForm"
        class="query-more-form"
        size="mini"
        label-width="100px"
        :model="query"
      >
        <el-row :gutter="21">
          <el-col :span="5">
            <el-form-item label="任务名称">
              <el-input
                v-model="query.taskName"
                class="search-ipt"
                placeholder="请输入任务名称"
                maxlength="255"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间区间">
              <el-date-picker
                v-model="query.caseTime"
                type="datetimerange"
                size="mini"
                range-separator="-"
                start-placeholder="开始"
                end-placeholder="结束"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5" class="el-col">
            <el-form-item label="行业" prop="industry">
              <!-- <el-input
                v-model="form.industryId"
                placeholder="请选择行业"
                maxlength="255"
                @focus="changeIndustryId"
              /> -->
              <el-select
                ref="industry"
                class="form_industry"
                v-model="query.industry"
                placeholder="请选择行业"
                @change="changeIndustryCode"
              >
                <el-option
                  v-for="item in industryArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="btn-col">
            <el-button size="mini" class="search-btn" @click="select"
              >查询</el-button
            >
            <el-button
              size="mini"
              class="search-btn"
              @click="resetForm('queryForm')"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </SearchPanel>
    <div class="table-container">
      <div class="table-tools-panel table-flex-row">
        <div class="table-btns-left">
          <el-button class="flush-btn blue" icon="el-icon-plus" @click="addCust"
            >新增</el-button
          >
          <el-button
            class="flush-btn yellow"
            icon="el-icon-refresh"
            @click="refresh"
            >刷新</el-button
          >
        </div>
        <div>
          <el-button
            class="tools-btn"
            size="mini"
            icon="el-icon-set-up"
          ></el-button>
          <el-button
            class="tools-btn"
            size="mini"
            icon="el-icon-share"
          ></el-button>
          <el-button
            class="tools-btn"
            size="mini"
            icon="el-icon-printer"
          ></el-button>
        </div>
      </div>
      <div class="table-list-panel">
        <el-table
          v-loading="tableLoading"
          border
          size="small"
          :data="tableData"
          :height="isShow ? 'calc(100vh - 410px)' : 'calc(100vh - 335px)'"
          style="width: 100%"
        >
          <el-table-column type="selection" width="45" />
          <el-table-column
            prop="taskName"
            label="任务名称"
            show-overflow-tooltip
          />
          <el-table-column prop="startTime" label="巡检时间区间" width="260">
            <template slot-scope="scope">
              <div>
                {{ parseTime(scope.row.beginTime) }}~{{
                  parseTime(scope.row.endTime)
                }}
              </div></template
            >
          </el-table-column>
          <el-table-column
            prop="frequency"
            label="检查频率"
            show-overflow-tooltip
          />
          <el-table-column
            prop="frequencyCompany"
            label="检查频率单位"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <template v-if="scope.row.frequencyCompany == 0">
                <span>天</span>
              </template>
              <template v-if="scope.row.frequencyCompany == 1">
                <span>周</span>
              </template>
              <template v-if="scope.row.frequencyCompany == 2">
                <span>月</span>
              </template>
              <template v-if="scope.row.frequencyCompany == 3">
                <span>季度</span>
              </template>
              <template v-if="scope.row.frequencyCompany == 4">
                <span>任务周期</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="任务部门"
            show-overflow-tooltip
          />
          <el-table-column
            prop="primaryCategoryName"
            label="行业名称"
            show-overflow-tooltip
          />
          <el-table-column prop="enable" label="启用状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <template>
                <el-switch
                  v-model="scope.row.enable"
                  active-text="启用"
                  inactive-text="禁用"
                  @change="changeEnable(scope.row)"
                >
                </el-switch>
                <!-- <span>{{ scope.row.enable == 0 ? "启用" : "禁用" }}</span> -->
              </template>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="任务状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="scope.row.status == 0">
                <span>未开始</span>
              </template>
              <template v-if="scope.row.status == 1">
                <span>正在执行</span>
              </template>
              <template v-if="scope.row.status == 2">
                <span>已执行</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click="handDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click="recordList(scope.row)"
                >记录列表</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-panel">
        <Pagination
          :total="query.total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          @pagination="select"
        />
      </div>
    </div>
    <CustomDialog
      :dialogVisible="visible"
      :dialog-type="dialogType"
      :type="query.type"
      :obj="obj"
      @closeDialog="visible = false"
      @refreshData="refreshData"
    />
    <DetailsCustomDialog
      :dialogVisible="DetailsCustomDialog"
      :dialog-type="dialogType"
      :type="query.type"
      :obj="obj"
      @closeDialog="DetailsCustomDialog = false"
    />

    <DetailsDialog
      :dialogVisible="DetailsDialog"
      :caseId="caseId"
      @closeDialog="DetailsDialog = false"
    />

    <ReportListDialog
      :dialogVisible="ReportListDialog"
      :reportList="reportList"
      @closeDialog="ReportListDialog = false"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import CustomDialog from "./components/CustomDialog";
import DetailsCustomDialog from "./components/DetailsCustomDialog";
import DetailsDialog from "./components/DetailsDialog";
import { parseTime } from "@/utils/index";
import { sourceType, industryArea } from "@/api/case";
import { getList1 } from "@/api/system/inspectionItemRecord";
import ReportListDialog from "./components/ReportListDialog";

import {
  getList,
  getPatrolList,
  editPlan
} from "@/api/system/doubleRandomMatters";
export default {
  name: "SpecialMatters",
  components: {
    SearchPanel,
    Pagination,
    CustomDialog,
    DetailsCustomDialog,
    DetailsDialog,
    ReportListDialog
  },
  data() {
    return {
      query: {
        total: 1,
        pageNum: 1,
        pageSize: 10,
        type: 0,
        caseTime: []
      },
      reportList: [],
      tableLoading: false,
      DetailsCustomDialog: false,
      ReportListDialog: false,
      DetailsDialog: false,
      tableData: [],
      department: [],
      isShow: true,
      visible: false,
      dialogType: "detail",
      // 行业类型
      industryArr: [],
      obj: {},
      caseId: null
    };
  },
  created() {
    this.initData();
    this.changeIndustryId();
  },
  methods: {
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },
    initData() {
      this.select();
    },

    // 记录列表
    recordList(val) {
      getList1({ planTaskId: val.id }).then(res => {
        let { code, rows } = res;
        if (code == 200) {
          this.reportList = rows;
          this.ReportListDialog = true;
        }
      });
    },
    resetForm(queryForm) {
      this.$refs[queryForm].resetFields();
      this.query.taskName = "";
    },
    changeEnable(val) {
      editPlan({
        id: val.id,
        enable: val.enable == true ? 0 : 1
      })
        .then(() => {
          this.$message.success("修改成功");
        })
        .catch(() => {});
    },

    // 查询行业
    changeIndustryId() {
      sourceType({
        parentCode: 0,
        typeCode: 2
      }).then(result => {
        let { code, rows } = result;
        if (code == 200) {
          this.industryArr = rows;
        }
      });
    },
    // 选择行业
    changeIndustryCode(val) {
      this.industryArr.forEach(item => {
        if (val == item.code) {
          this.query.primaryCategoryName = item.name;
          this.query.primaryCategoryId = item.id;
        }
      });
    },
    parseTime,
    select() {
      if (this.query.caseTime) {
        this.query.startTime = new Date(this.query.caseTime[0]).getTime();
        this.query.endTime = new Date(this.query.caseTime[1]).getTime();
      }

      let isUserDataMsg = JSON.parse(localStorage.getItem("isUserDataMsg"));
      // this.query.deptId = isUserDataMsg.deptId;

      const query = JSON.parse(JSON.stringify(this.query));
      this.tableLoading = true;
      getPatrolList(query)
        .then(result => {
          this.tableLoading = false;
          this.query.total = result.total;
          this.tableData = result.rows;
          this.tableData.forEach(item => {
            item.enable = item.enable == 0 ? true : false;
          });
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 新增成功，刷新页面
    refreshData() {
      this.select();
    },
    // 刷新页面
    refresh() {
      this.query = {
        total: 1,
        pageNum: 1,
        pageSize: 10,
        type: 0
      };
      this.select();
    },
    // 新增
    addCust() {
      this.visible = true;
      this.dialogType = "add";
      this.obj = {};
    },
    // 详情
    handDetail(row) {
      this.DetailsDialog = true;
      this.caseId = row.id;
      // getOne(row.id).then(res => {
      //   this.dialogType = "detail";
      //   this.DetailsCustomDialog = true;
      //   this.obj = JSON.parse(JSON.stringify(res.data));
      // });
    }
  }
};
</script>

<style lang="scss" scoped></style>
